<template>
	<div>
		<Header/>
		<!-- 导航区域 -->
		<div class="col-xs-2 col-xs-offset-2">

			<!-- router-link的to属性的第一种写法 —— 字符串 -->
			<!-- <router-link class="list-group-item" to="/about" active-class="active">About</router-link> -->
			<!-- <router-link class="list-group-item" to="/home"  active-class="active">Home</router-link> -->

			<!-- router-link的to属性的第二种写法 —— 对象 -->
			<router-link class="list-group-item" :to="{path:'/about'}" active-class="active">About</router-link>
			<router-link class="list-group-item" :to="{path:'/home'}"  active-class="active">Home</router-link>

		</div>
		<!-- 展示区 -->
		<div class="col-xs-6 panel-body">
			<!-- 用router-view占一下位，告诉路由器匹配上的路由组件展示到这里 -->
			<router-view/>
		</div>
	</div>
</template>

<script>
	import Header from './components/Header.vue'

	export default {
		name:'App',
		components:{Header},
		mounted() {
			console.log('App挂载了')
		},
	}
</script>
